<template>  <div class="pager-container" v-if="pageNumber > 1">
    <a  @click="handleClick(1)" class="{disabled: current===1}">|&lt;&lt;</a>
    <a  @click="handleClick(current-1)" class="{disabled: current===1}">|&lt;&lt;</a>
    <a  @click="handleClick(n)" v-for="(n,i) in numbers" :key="i" :class="{active:n===current}">{{ n }}</a>
    <a  @click="handleClick(current+1)" class="{disabled: current===pageNumber}">|&gt;&gt;</a>
    <a  @click="handleClick(pageNumber)" class="{disabled: current===pageNumber}">|&gt;&gt;</a>
  </div></template>

<script>
export default {
  props: {
    current: {
      type:Number,
      default:1,
    },
    total: {
      type:Number,
      default:0,
    },
    limit: {
      typr:Number,
      default:10,
    },
    visibleNumber: {
      type:Number,
      default:10,
    }
  },
  computed: {
    pageNumber(){
      return Math.ceil(this.total/this.limit)
    },
    minNumber(){
      let min = Math.floor(this.current-this.visibleNumber/2);
      if(min<1) {
        min=1;
      }
      return min;
    },
    maxNumber(){
       let max=this.minNumber+ this.visibleNumber-1;
       if (max>this.pageNumber) {
        max=this.pageNumber;
       }
       return max;
    },
    numbers(){
      let nums = [];
      for(let i=this.minNumber;i<this.maxNumber;i++) {
        nums.push(i)
      }
      return nums;
    }
  },
  methods: {
    handleClick(newPage) {
      if(newPage<1) {
        newPage=1
      }
      if(newPage>this.pageNumber) {
        newPage= this.pageNumber
      }
      if(newPage===this.current) {
        return
      }
      // 向父组件抛出事件
      this.$emit("pageChange",newPage)
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/styles/var.less";
.pager-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  a {
    color: @primary;
    margin: 0 6px;
    cursor: pointer;
    &.disabled {
      color: @lightWords;
      cursor: not-allowed;
    }
    &.active {
      color: @words;
      font-weight: bold;
      cursor: text;
    }
  }
}
</style>